<script>
//====
</script>

<template>
  <div class="header">

    <div class="h-tx">
      <a-avatar-group :size="35">
        <a-avatar :style="{ backgroundColor: '#7BC616' }" trigger-type="mask">
          <img alt="avatar"
               src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"/>
        </a-avatar>
      </a-avatar-group>

    </div>
    <div class="h-qt">水煎包的CloudNas</div>


  </div>
</template>


<style lang="less" scoped>

// 定义变量
@header-height: 3rem;
@header-color: #ffffff;
@header-width: 100%;

// 基本按钮样式
.header {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: @header-width;
  height: @header-height;
  box-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.1), 0 1px 4px -1px rgba(0, 0, 0, 0.06); /* 阴影效果 */
  //margin: 5px 0; /* 分界线与上下内容的间距 */
  .h-tx {
    height: @header-height;
    display: flex;
    align-items: center;
    margin: 0 12px;

  }

  .h-qt {
    display: flex;
    flex: 1;
    font-weight: bold;
  }

}


</style>